<template>
	<view>
		<u-navbar bgColor="rgba(0,0,0,.3)" titleStyle="color: #fff;" leftIconColor="#fff" title="商品详情"
			:autoBack="true"></u-navbar>
		<u-swiper radius="0" indicatorStyle="right: 20rpx" duration="600" imgMode="scaleToFill" circular height="350"
			:list="pics" @change="e => currentNum = e.current">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ pics.length }}</text>
			</view>
		</u-swiper>
		<view class="top_main">
			<view style="display: flex;align-items: center;justify-content: space-between;">
				<view style="color: #FF0000;font-size:22rpx;">
					<text style="">￥</text>
					<text style="font-size: 34rpx;margin-right: 8rpx;">{{List.member_price}}</text>
					<text style="color: #999999;text-decoration: line-through;">原价:￥{{List.original_price}}</text>
				</view>
				<view style="color: #666666 ;font-size: 22rpx;">
					库存 {{List.goods_num}}
				</view>
			</view>
			<view class="goods_detail">
				{{List.goods_name}}
			</view>
			<!-- <view class="bottom_tip">
				<view class="tip_text">
					<image src="/static/img/httpindex/goods/copy.png"
						style="margin-right: 10rpx;width: 20rpx;height:20rpx;" mode=""></image>
					复制商品码
				</view>
				<view class="tip_text">
					<image src="/static/img/httpindex/goods/copy.png"
						style="margin-right: 10rpx;width: 20rpx;height:20rpx;" mode=""></image>
					复制商品名
				</view>
				<view class="tip_text">
					<image src="/static/img/httpindex/goods/collect.png"
						style="margin-right: 10rpx;width: 20rpx;height:20rpx;" mode=""></image>
					收藏商品
				</view>
			</view> -->
		</view>
		<!-- <view class="main_card">
			<view class="input_phone" style="width: 100%;justify-content: space-between;">
				<view style="display: flex;align-items: center;width:100%">
					<text class="left_txt">选择</text>
					<view v-if="select_spec==''" @click="goods_show=true" style="font-size:24rpx;color:#CCCCCC ">请选择商品规格
					</view>
					<view v-else @click="goods_show=true" style="font-size: 26rpx;">已选：{{select_spec}}</view>
				</view>
				<image src="/static/img/httpindex/goods/youjian.png" style="width: 14rpx;height: 18rpx;" mode="">
				</image>


			</view> -->
		<!-- <view class="input_phone" style="width: 100%;justify-content: space-between;">
				<view style="display: flex;align-items: center;width:100%">
					<text class="left_txt">地址</text>
					<view style="font-size:24rpx;color:#CCCCCC ">请选择收货地址</view>
				</view>
				<image src="/static/img/httpindex/goods/youjian.png" style="width: 14rpx;height: 18rpx;" mode="">
				</image> -->

		<!-- <view  style="font-size: 26rpx;"></view> -->
		<!-- </view> -->
		<!-- <view class="input_phone">
				<text class="left_txt">运费</text>
				<view style="font-size: 26rpx;" class="">
					全国包邮
				</view>
			</view>
			<view class="input_phone">

				<text class="left_txt">配送</text>
				<view style="font-size: 26rpx;" class="">
					除少数边远地区
				</view>
			</view> -->
		<!-- </view> -->
		<view class="goods_jie">
			<u-parse :content="goods_detail" :tagStyle="style"></u-parse>
		</view>
		<view class="bottom_btns">
			<view class="two_btn" style="flex: 2;">
				<view style="text-align: center;">
					<image style="width: 33rpx;height: 33rpx;" src="@/static/img/cate/kefu.png" mode="">
					</image>
					<view style="font-size: 16rpx;color:#313131;">客服</view>
				</view>
				<view style="text-align: center;" @tap="goCart">
					<image style="width: 36rpx;height: 36rpx;" src="@/static/img/index/small_car.png" mode=""></image>
					<view style="font-size: 16rpx;color:#313131;">购物车</view>
				</view>
			</view>
			<view class="two_btn" style="flex: 4;">
				<view class="pay_btn" style="background: #F8B551;" @tap="addCart">加入购物车</view>
				<view class="pay_btn" style="background: #E60012;" @tap="buyCart">立即购买</view>
			</view>
		</view>
		<!-- <u-popup :show="goods_show" round='5' :closeable="true"
			customStyle="position:relative;padding: 30rpx;background: #fff;" @close="goods_show=false">
			<view class="popup_main">
				<view class="top_box">
					<image style="width: 200rpx;height: 200rpx;"
						src="/static/img/httpindex/Iz8UP8Ys3diFjtmJZUK01269.png" mode=""></image>
					<view style="margin-left: 30rpx;">
						<view style="color: #FF0000;font-size:22rpx;">
							<text style="">￥</text>
							<text style="font-size: 34rpx;margin-right: 8rpx;">26.56</text>
							<text style="color: #999999;text-decoration: line-through;">原价:￥29.00</text>
						</view>
						<view style="color: #666666 ;font-size: 22rpx;">
							库存999
						</view>
					</view>
				</view>
				<view class="spec_tip">
					<view>规格</view>
					<view style="color: #666666;font-size: 24rpx;font-weight:500;">编号：12458565565</view>
				</view>
				<view style="height: 460rpx;">
					<view class="spec_main_card">
						<text class="spec_smallcard" style="color: #FF0000;border:1px solid  #FF0000">
							规格一
						</text>
						<text class="spec_smallcard">
							规格一1
						</text>
						<text class="spec_smallcard">
							规格一2
						</text>
					</view>
				</view>
				<view class="spec_tip">
					<view>数量</view>
					<view style="zoom: .8;">
						<u-number-box v-model="goods_num" buttonSize="26"></u-number-box>
					</view>
				</view>
				<view @click="sureGoods" class="spec_btn">
					确定
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				currentNum: '',
				goods_show: false,
				select_spec: '',
				goods_spec: '',
				goods_num: 1,

				id: 0,
				number: 1,
				List: {},
				// baseParameter: [],
				// grapeVariety: [],
				// wineTaster: [],
				// packages: [],
				// parameterId: 0,
				specStock: 0, //规格库存
				isCollectProduct: false,
				// currentIndex: 0,
				// defaultGuige: {},
				// guige: [],
				// skuList: [],
				showShare: false,
				goods_detail: '',
				spec_name: '无',
				pics: [],

				style: {
					img: 'display:flex'
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.detail()

			// console.log(this.hasLogin)
			if (this.hasLogin) {
				// this.addShopBrowser()
				this.isCollect()
			}
		},
		computed: {
			...mapState(['hasLogin']),
		},
		methods: {
			...mapMutations(['login', 'logout']),
			sureGoods() {
				this.goods_show = false;
				this.select_spec = this.goods_spec;
			},

			// 详情
			async detail() {
				let res = await this.$myRequest({
					url: '/goodsdetail',
					data: {
						id: this.id
					}
				})

				this.List = res.data.data
				console.log(this.List)
				this.pics = this.List.pics
				console.log(this.pics)
				this.goods_detail = this.List.goods_detail
				// this.baseParameter = this.List.base_parameter
				// this.packages = this.List.package
				// this.parameterId = this.List.parameter_id
				// this.spec_name = this.List.spec_name
				this.specStock = this.List.goods_num
			},

			// 是否已收藏
			async isCollect() {
				let res = await this.$myRequest({
					url: '/isCollect',
					data: {
						token: uni.getStorageSync('token'),
						id: this.id
					}
				})
				// console.log(res)
				this.isCollectProduct = res.data.data.data

			},

			// 立即购买
			async buyCart() {
				let result = this.$api.isLogin();
				if (result === false) {
					return false;
				}

				// if (!this.parameterId || this.parameterId <= 0) {
				// 	this.$api.msg('尚未选择规格！')
				// 	return false
				// }

				if (this.number > this.specStock) {
					this.$api.msg('商品余量不足！')
					return false
				}

				let paramArr = []
				// let param = {
				// 	parameter_id: this.parameterId,
				// 	number: this.number
				// }

				let param = {
					id: this.id,
					number: this.number
				}

				paramArr.push(param)

				let dataObj = {
					token: uni.getStorageSync('token'),
					data: JSON.stringify(paramArr)
				}

				console.log(dataObj)

				let res = await this.$myRequest({
					url: '/order',
					methods: 'POST',
					data: dataObj
				})

				// this.$refs.popup.close()
				this.$api.msg('去创建订单');
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/cart/order?tag=' + res.data.data
					})
				}, 500)
			},

			// 添加商品进入购物车
			async addCart() {
				let result = this.$api.isLogin();
				if (result === false) {
					return false;
				}

				// if (!this.parameterId || this.parameterId <= 0) {
				// 	this.$api.msg('尚未选择规格！')
				// 	return false
				// }

				console.log(this.specStock)

				if (this.number > this.specStock) {
					this.$api.msg('商品余量不足！')
					return false
				}

				let res = await this.$myRequest({
					url: '/addCart',
					methods: 'POST',
					data: {
						token: uni.getStorageSync('token'),
						id: this.id,
						number: this.number
					}
				})

				// this.$refs.popup.close()
				uni.$emit('changeCartList');
				this.$api.msg(res.data.msg)
			},

			goCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F9F9F9;
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		display: flex;
		justify-content: center;
	}

	.indicator-num__text {
		color: #FFFFFF;
		font-size: 12px;
	}

	.top_main {
		padding: 30rpx 24rpx;
		border-radius: 0 0 10rpx 10rpx;
		background: #FFFFFF;
	}

	.two_btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	,
	.goods_detail {
		color: #121212;
		font-size: 24rpx;
		font-weight: 600;
		margin-top: 26rpx;
		width: 100%;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden; //溢出内容隐藏
		text-overflow: ellipsis; //文本溢出部分用省略号表示
		display: -webkit-box; //特别显示模式
		-webkit-line-clamp: 2; //行数
		line-clamp: 2;
		-webkit-box-orient: vertical; //盒子中内容竖直排列
	}

	.bottom_tip {
		margin-top: 34rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tip_text {
		flex: 1;
		font-size: 22rpx;
		color: #999;
		padding: 22rpx 0;
		text-align: center;
	}

	.main_card {
		margin: 0 16rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		padding-top: 0;
		background-color: #fff;
	}

	.input_phone {
		display: flex;
		align-items: center;
		padding: 22rpx 0rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f4f4f4;

	}

	.left_txt {
		font-size: 26rpx;
		color: #666666;
		min-width: 90rpx;
	}

	.goods_jie {
		color: #313131;
		font-size: 30rpx;
		margin-top: 20rpx;
		font-weight: 600;
		text-align: center;
		padding: 24rpx 0;
		border-radius: 10rpx;
		background: #fff;
	}

	.popup_main {
		height: 1000rpx;
		margin-top: 20rpx;
		position: relative;
	}

	.top_box {
		display: flex;
		align-items: flex-end;
	}

	.spec_tip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #313131;
		font-weight: 600;
		margin-top: 40rpx;
	}

	.spec_smallcard {
		padding: 14rpx 38rpx;
		border-radius: 10rpx;
		color: #999999;
		font-size: 24rpx;
		border: 1px solid #D2D2D2;
		margin-top: 16rpx;
		margin-right: 16rpx;
	}

	.spec_main_card {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 28rpx;
		/* height: 600rpx; */
	}

	.spec_btn {
		background: linear-gradient(to right, #FF403C, #FF6C00);
		position: absolute;
		bottom: 2px;
		border-radius: 50px;
		color: #fff;
		padding: 20rpx 0;
		font-size: 28rpx;
		width: 100%;
		box-sizing: border-box;
		text-align: center;
	}

	.bottom_btns {
		background: #fff;
		height: 100rpx;
		display: flex;
		align-items: center;
		position: fixed;
		padding: 0 26rpx;
		box-sizing: border-box;
		bottom: 0;
		width: 100%;
	}

	.pay_btn {
		color: #fff;
		font-size: 30rpx;
		padding: 18rpx 0;
		border-radius: 50px;
		width: 200rpx;
		text-align: center;
		font-weight: 600;
	}
</style>